const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: {
        // 最先的-----公共的css
        commonCSS:'./src/js/commonCSS.js',
        conten:'./src/js/common/conten.js',
        dom:'./src/js/common/dom.js',
        flexible:'./src/js/common/flexible.js',
        utils:'./src/js/common/utils.js',
        swiper:'./src/lib/swiper-7.4.1/swiper-bundle.js',
        // 公共的js
        // 三方的js/css
        // 自己的页面级别的js
        home:'./src/js/home.js',
        login: './src/js/login.js',
        register: './src/js/register.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 10 * 1024,
                    esModule: false,
                    outputPath: 'img'
                }
            },
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'font'
                }
            },
            {
                test: /\.html/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/home.html',
            filename: 'home.html',
            chunks: ['home','commonCSS','dom','utils','conten','swiper']
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login','commonCSS','dom','utils','conten']
        }),
        new HtmlWebpackPlugin({
            template: './src/register.html',
            filename: 'register.html',
            chunks: ['register','commonCSS','dom','utils','conten']
        }),
      
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8080,  // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'home.html', // 打开的页面
    },
    target: 'web', // 目标
}